import { defineComponent } from 'vue'
import { TrackDataArrType, TrackBaseDataType } from '@/http'

export default defineComponent({
  data () {
    const arr:TrackDataArrType = []
    const obj:TrackBaseDataType = {
      url: '',
      session_id: '',
      source: '',
      patpat_platform: '',
      is_automated: 1,
      device_language: ''
    }
    return {
      mergeData: arr,
      isTrackMergeKey: false,
      trackBaseData: obj
    }
  },
  /**
   * @description mixin 混入不执行 setup
   */
  // steup () {
  //   const arr:TrackDataArrType = []
  //   const mergeData = ref(arr)
  //   const appendClickTrackData = (clickName:string) => {
  //     const obj:MergeObj = { type_id: 2, event_id: clickName, timestamp: Date.now() }
  //     mergeData.value.push(obj)
  //   }
  //   return {
  //     appendClickTrackData,
  //     mergeData
  //   }
  // },
  methods: {
    /**
     * 初始化基础参数
     */
    initBaseData () {
      this.trackBaseData.url = window.location.href
      this.trackBaseData.session_id = localStorage.getItem('token') || ''
      this.trackBaseData.source = 'wap'
      const deviceLanguage = navigator.languages && navigator.languages.length > 0 ? navigator.languages[0] : ''
      this.trackBaseData.device_language = deviceLanguage
      this.trackBaseData.patpat_platform = 'wap'
      this.trackBaseData.is_automated = navigator.webdriver ? 1 : 0
    },
    /**
     * @description 页面级别曝光，注意页面级别组件必须添加name属性
     */
    appendPageTrackData () {
      const obj = { type_id: 1, event_id: this.$options.name ? this.$options.name : 'unname', timestamp: Date.now() }
      this.mergeData.push(obj)
      // this.postTrackData() // 进来就曝光， 可放在最后一次离开页面曝光
    },
    appendShowTrackData (showName:string) {
      const obj = { type_id: 3, event_id: showName, timestamp: Date.now() }
      this.mergeData.push(obj)
    },
    appendClickTrackData (clickName:string) {
      const obj = { type_id: 2, event_id: clickName, timestamp: Date.now() }
      this.mergeData.push(obj)
    },
    postTrackData () {
      if (this.mergeData.length > 0) this.$api.trackData(this.mergeData)
      const params = { mergeData: JSON.stringify(this.mergeData) }
      // const fromData = new FormData()
      // for (const [key, value] of Object.entries(params)) {
      //   console.log(key)
      //   fromData.append(key, value)
      // }
      // navigator.sendBeacon('/trackApi', fromData)
      const data = { ...this.trackBaseData, ...params }
      this.$api.trackData(data)
      console.log(data, 'this.mergeData')
      this.mergeData.length = 0
    },
    beforeunloadFn () {
      this.appendClickTrackData('close_single_page')
      this.postTrackData()
    }
  },
  mounted () {
    this.appendPageTrackData()
    window.addEventListener('pagehide', this.beforeunloadFn)
    window.addEventListener('beforeunload', this.beforeunloadFn)
  },
  activated () {
    if (this.isTrackMergeKey) {
      this.appendPageTrackData()
      window.addEventListener('pagehide', this.beforeunloadFn)
      window.addEventListener('beforeunload', this.beforeunloadFn)
    }
    this.isTrackMergeKey = true
  },
  deactivated () {
    this.isTrackMergeKey = false
    window.removeEventListener('pagehide', this.beforeunloadFn)
    window.removeEventListener('beforeunload', this.beforeunloadFn)
    this.beforeunloadFn()
  },
  unmounted () {
    window.removeEventListener('pagehide', this.beforeunloadFn)
    window.removeEventListener('beforeunload', this.beforeunloadFn)
    this.isTrackMergeKey = false
    this.beforeunloadFn()
  }
})
